<!DOCTYPE html>
<html>

<head>
    <title>CSS智能手表</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <style>
        body {
            margin: 0;
        }
    </style>

    <style>
        .watch {
            --watch-color: white;
            --screen-color: black;
            font-size: 4.5vmin;
            font-family: monospace;
            color: #fff;
            padding: 2em 1.5em;
            border: 2px solid var(--watch-color);
            border-radius: 2em;
            box-shadow:
                inset 0 0 0 .5em black,
                inset 0 0 1rem 1em hsl(0 0% 100% / .25);
            background-color: var(--screen-color);
            background-image: linear-gradient(to bottom right, #fff0 50%, hsl(0 0% 100% / .25));
            position: relative;
        }

        .watch::before,
        .watch::after {
            content: "";
            position: absolute;
            background-color: var(--watch-color);
            z-index: -1;
        }

        .watch::after {
            inset: -.5em 20%;
            border-radius: .5em;
            background-image:
                linear-gradient(#fff0, hsl(0 0% 0% / .5) .5em calc(100% - .5em), #fff0);
        }

        .watch::before {
            inset: -50vh 25%;
            background-image:
                repeating-linear-gradient(#fff0 0 .3em, hsl(0 0% 0% / .125) .3em .5em, #fff0 .5em .8em),
                radial-gradient(circle, #fff0, hsl(0 0% 0% / .25) 50%);
        }

        .keyword {
            color: #ddca7e;
        }

        .def {
            color: #809bbd;
        }

        .operator {
            color: #cccccc;
        }

        .property {
            color: #9a8297;
        }

        .string {
            color: #96b38a;
        }

        .number {
            color: #d0782a;
        }

        .time-highlight {
            color: #ff6600;
        }

        * {
            box-sizing: border-box;
        }

        body {
            margin: 0;
            padding: 1em;
            min-height: 100vh;
            background-color: #1d1e22;
            display: grid;
            place-items: center;
            overflow: hidden;
        }
    </style>
</head>

<body>
    <div class="watch"></div>

    <script type="text/javascript">
        clock();

        function clock() {
            const date = new Date();
            const indent = 2;
            const am_pm = date.getHours() >= 12 ? '下午' : '上午';
            const timeStr = `${date.getHours()} 时 ${date.getMinutes()} 分 ${date.getSeconds()} 秒`;
            const month = date.toLocaleDateString('zh-CN', { month: 'long' });
            const day = date.getDate();
            const dateStr = `${month}${day}号`;
            const clockObj = {
                am_pm: am_pm,
                time: timeStr,
                day: date.toLocaleDateString('zh-CN', { weekday: 'long' }),
                date: dateStr,
                year: date.getFullYear()
            };

            const valFormat = (val, isTime = false) => {
                if (typeof val === 'number') {
                    return `<span class="value number">${val}</span>`;
                } else if (typeof val === 'string') {
                    if (isTime) {
                        return `<span class="value string time-highlight" style="font-size: 1.5em">"${val}"</span>`;
                    }
                    return `<span class="value string">"${val}"</span>`;
                }
            };

            document.querySelector(".watch").innerHTML =
                `<span class="keyword">const</span> <span class="def">clock</span> <span class="operator">=</span> {<br>`
                + Object.entries(clockObj).reduce((str, [key, val]) => {
                    const isTime = key === 'time';
                    return str + `${'&nbsp'.repeat(indent)}<span class="property">${key}</span>: ${valFormat(val, isTime)},<br>`;
                }, '')
                + '};';

            requestAnimationFrame(clock);
        }
    </script>
</body>

</html>
    